<template>
    <div class="flex-eCharts">
        <div ref="EChartRef" style="width: 100%; height: 600px"></div>
        <div class="select-box">
            <el-date-picker
                placeholder="请选择"
                class="date-picker"
                v-model="queryParams.buyDateTime"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                size="small"
                @Change="handleDatePickerChange" />
        </div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, reactive, toRefs } from 'vue'
import { gbDayRecord } from '@/api/index'
import { lineChartData, eChartNames } from './ECharts'
import moment from 'moment'

onMounted(() => {
    initECharts()
    createEChart()
})

const EChartRef = ref()
let myChart = null

const data = reactive({
    queryParams: {
        buyDateTime: moment().format('YYYY-MM-DD'),
    },
})

const { queryParams, option } = toRefs(data)

const initECharts = () => {
    try {
        echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])
        myChart = echarts.init(EChartRef.value)
    } catch (error) {
        console.log(error)
    }
}

const createEChart = async () => {
    try {
        lineChartData.value.series = []
        lineChartData.value.xAxis = []
        lineChartData.value.yAxis = []
        const { result: data } = await gbDayRecord(queryParams.value)
        let nameSet = ['groupLine', 'personLine']
        nameSet.map((key, index) => {
            const lineData = data[key]
            let dataAxis = []
            const { name, startColor, endColor } = eChartNames[key]
            const { xAxis, yAxis, series } = lineChartData.value
            xAxis.push({
                gridIndex: index,
                name: '时间',
                data: data.xLine.map((item) => item.split(' ')[1]), //dataAxis,
            })
            yAxis.push({
                gridIndex: index,
                name: name,
            })
            series.push({
                type: 'line',
                showSymbol: false,
                xAxisIndex: index,
                yAxisIndex: index,
                smooth: true,
                lineStyle: {
                    width: 0,
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: startColor,
                        },
                        {
                            offset: 1,
                            color: endColor,
                        },
                    ]),
                },
                emphasis: {
                    focus: 'series',
                },
                data: lineData,
            })
        })
        myChart.dispose
        myChart.setOption(lineChartData.value)
    } catch (error) {
        console.log(error)
    }
}
const handleDatePickerChange = () => {
    queryParams.value.buyDateTime = queryParams.value.buyDateTime || ''
    createEChart()
}
</script>

<style lang="scss" scoped>
.flex-eCharts {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    padding: 56px 12px 12px;
    position: relative;
    .select-box {
        position: absolute;
        right: 72px;
        top: 20px;
        ::v-deep(.el-input--small) {
            width: 100px;
        }
    }
}
</style>
